<template>
  <el-card class="mt20">
    <el-row>
      <span class="section-title">服务套餐详情</span>
    </el-row>

    <el-row :gutter="20" class="mt20">
      <el-col :span="24">
        <span>服务套餐：</span>
        <span>{{state.servicePackageName || '暂无数据'}}</span>
      </el-col>
    </el-row>
    <el-table :data="state.servicePackageData"
              empty-text="暂无数据!"
              border style="width: 100%;
              margin-top: 20px;">
      <el-table-column label="序号" type="index" width="60"/>
      <el-table-column prop="name" maxWidth="200" label="服务名称"/>
      <el-table-column prop="introduction" label="服务介绍"/>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" size="small" >查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import {onBeforeMount, reactive,watch} from "vue";
import {queryPackageSvInfoList} from "/@/api/entService/serviceInfo";
import {querySvPackageEntity} from "/@/api/entService/servicePackage";

import {useRouter, useRoute} from "vue-router";
const router = useRouter()


const props = defineProps({
  packageId:{
    type: String,
    default: ""
  }
})
const state = reactive({
  servicePackageData: [],
  servicePackageName:"",
  emptyText:"",
})
const page = {
  init:async()=>{
    //查询服务套餐名称
    try {
      const packageRes = await querySvPackageEntity(props.packageId);

      if(packageRes.data != null){
        state.servicePackageName = packageRes.data.name;
      }

    }catch (e){
      console.log("查询服务套餐名称失败",e);
    }

    //查询服务套餐包含的服务列表
    try {
     const infoRes = await queryPackageSvInfoList({packageId: props.packageId});
     if(infoRes.data != null && infoRes.data.length > 0){
       state.servicePackageData = infoRes.data;
     }else{
       state.servicePackageData = []
     }

    }catch (e){
      console.log("查询服务套餐包含的服务列表",e);
    }
  },
  go:()=>{
    //跳转到服务详情
    router.push({
      path: "serviceDetail",
      query: {
        svId: ""
      }
    })
  }
}
onBeforeMount(() => {
  page.init();
});
watch(
    ()=>props.packageId,
    ()=>{
      page.init();
    }
)
</script>

<style scoped>
.section-title {
  font-size: 18px;
  font-weight: bold;
}
.mt20 {
  margin-top: 20px;
}
</style>
